<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>小程序工厂</title>
  <script src="js/jquery.min.3.4.1.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <!-- element-ui---引入样式 -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
  <!-- element-ui---引入组件库 -->
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <!-- css初始化 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/reset.css">
  <!-- icon导入 -->
  <link rel="stylesheet" href="css/icon.css">
  <!-- 本页样式 -->
  <link rel="stylesheet" href="css/workshop.css">
</head>

<body>
  <header id="header">
    <a href="#">
      <img src="img/logo.png" />
      贝肯为微信平台
    </a>
    <div class="nav">
      <a href="#">小程序</a>
      <a href="#">公众号</a>
      <a href="#">会员</a>
      <a href="/marketing">营销</a>
      <a href="/transaction">交易</a>
      <a href="#">设置</a>
    </div>
    <div class="operating">
      <div>用户名</div>
      <div>注销登录</div>
    </div>
  </header>
  <div class="about" id="app">
    <div class="position">
      小程序管理
      <span>/ 小程序名称 /</span>
      装修
    </div>
    <div class="title">
      <i class="iconfont icon-shouye"></i>
      装修
      <span>更换模板</span>
      <span>装修过程中不想影响线上客户使用要怎么做呢？</span>
    </div>
    <div class="factory">
      <div class="tool">
        <ul class="nav-tabs">
          <li @click="commodityPageSel" data-type="page" :class="{'active':selcommodityPage == 'page'}">页面管理</li>
          <li @click="commodityPageSel" data-type="commodity" :class="{'active':selcommodityPage == 'commodity'}">组件库
          </li>
        </ul>
        <div class="pageList" v-if="selcommodityPage === 'page'">
          <!-- <div class="newPage">
            <i class="iconfont icon-fenxiang2"></i>
            新建页面
          </div> -->
          <ul class="pageLi">
            <li v-for="(item, index) in pageList" :data-id="item.id" :data-type="item.id" @click="selPage">
              <span>
                <i :class="'iconfont icon-'+item.icon"></i>
                {{ item.name }}
              </span>
              <i class="iconfont icon-fenxiang2"></i>
            </li>
          </ul>
        </div>
        <div class="moduleList" v-if="selcommodityPage === 'commodity'">
          <div class="item">
            <div class="typeNmae">--标题--</div>
            <ul class="dragstartDom">
              <li v-for="(item, index) in pageComponent" draggable="true" :id="item.id" @dragstart="copyDrop($event)">
                <i :class="'iconfont icon-'+item.icon"></i>
                {{ item.name }}
              </li>
              <!-- <li draggable="true" id="nav1" @dragstart="copyDrop($event)">
                <i class="iconfont icon-home"></i>
                导航1
              </li> -->
            </ul>
          </div>
        </div>
      </div>
      <!-- 手机模型 -->
      <div class="effect">
        <div class="mobileSta">
          <span>9:50</span>
          <div>
            <i class="iconfont icon-shouye"></i>
            <i class="iconfont icon-shouye"></i>
            <i class="iconfont icon-shouye"></i>
          </div>
        </div>
        <div class="pageInfo">
          <i class="iconfont icon-shouye"></i>
          <span>页面名称</span>
          <i class="iconfont icon-shouye"></i>
        </div>
        <!-- 显示器模拟器 -->
        <div id="pageModel" class="pageShow" @drop="getDrop($event)" @dragover="allowDrop($event)"></div>
      </div>
      <!-- 组件数据设置区域 -->
      <div class="adjustment">
        <div class="placard1_Setting setSettingComponent">
          <!-- 公告内容设置 -->
          <div class="title">公告内容设置</div>
          <div class="form-group">
            <label for="exampleInputEmail1">公告内容</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
              placeholder="公告内容">
            <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
        <!-- setSettingComponent -->
        <div class="nav1_Setting nav2_Setting nav3_Setting setSettingComponent">
          <!-- 导航1，导航2，导航3=====>>>>内容设置 -->
          <div class="title">导航内容设置</div>
          <div class="item">
            <div class="form-group">
              <label for="exampleInputEmail1">输入名称</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="公告内容">
              <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">使用图片</label>
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">选择图标</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile1">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">使用预制图标</label>
            </div>
            <div class="form-group">
              <button type="button" id="iconSel" class="btn btn-success">图标选择</button>
              <button type="button" id="colorSel" class="btn btn-danger">图标颜色选择</button>
              <i class="iconfont icon-fenxiang2"></i>
            </div>
          </div>

          <div class="form-group">
            <button type="button" class="btn btn-link">新增导航</button>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
        <div class="nav4_Setting setSettingComponent">
          <!-- 导航4=====>>>>内容设置 -->
          <div class="title">导航内容设置</div>
          <div class="item">
            <div class="form-group">
              <label for="exampleInputEmail1">输入名称</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="公告内容">
              <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
            </div>
          </div>

          <div class="form-group">
            <button type="button" class="btn btn-link">新增导航</button>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
        <div class="commodityList1_Setting commodityList2_Setting commodityList3_Setting setSettingComponent">
          <!-- 商品信息添加，修改=====>>>>内容设置 -->
          <div class="title">商品信息添加，修改</div>
          <div class="item">
            <div class="form-group">
              <label for="exampleInputEmail1">输入商品名称</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="公告内容">
              <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">输入商品描述</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="公告内容">
              <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">输入商品价格</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="公告内容">
              <small id="emailHelp" class="form-text text-muted">说明信息说明信息说明信息</small>
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">上传商品轮播图片</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile1">
            </div>
            <div class="form-group">
              <label for="exampleFormControlFile1">上传商品详情图片</label>
              <input type="file" class="form-control-file" id="exampleFormControlFile1">
            </div>
          </div>

          <div class="form-group">
            <button type="button" class="btn btn-link">导入已有商品</button>
            <button type="button" class="btn btn-link">新增商品</button>
          </div>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>

    <div class="domList">
      <div draggable="true" data-type="search1" id="search1_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <i class="iconfont icon-fenxiang2"></i>
        <input type='text' placeholder='请输入搜索内容' />
      </div>
      <div draggable="true" data-type="search2" id="search2_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <i class="iconfont icon-fenxiang2"></i>
        <input type='text' placeholder='请输入搜索内容' />
      </div>
      <div draggable="true" data-type="placard1" id="placard1_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class='title'>
          <i class="iconfont icon-laba"></i>
          <div>公告：</div>
        </div>
        <div class='con'>公告公告公告公告公告公告公告公告公告公告公告公告！</div>
      </div>
      <div draggable="true" data-type="nav1" id="nav1_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <!-- <block wx:for="{{data}}" key="index" index="index" item="item">
          <div class="item">
            <i class="iconfont icon-tuihuobaozhang"></i>
            <div>导航</div>
          </div>
          <div class="item">
            <i class="iconfont icon-tuihuobaozhang"></i>
            <div>导航</div>
          </div>
        </block> -->
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
      </div>
      <div draggable="true" data-type="nav2" id="nav2_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
      </div>
      <div draggable="true" data-type="nav3" id="nav3_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
        <div class="item">
          <i class="iconfont icon-home2"></i>
          <div>导航</div>
        </div>
      </div>
      <div draggable="true" data-type="nav4" id="nav4_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="item">导航</div>
        <div class="item">导航</div>
        <div class="item">导航</div>
        <div class="item">导航</div>
        <div class="item">导航</div>
        <div class="item">导航</div>
        <div class="item">导航</div>
      </div>
      <div draggable="true" data-type="commodityList1" id="commodityList1_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="listName">列表标题列表标题</div>
        <div class="item">
          <img src="img/logo.png">
          <div class='info'>
            <div class="name">名字名字</div>
            <div class="infoCon">
              <div class="infotext">
                <div class='price'>99999999</div>
                <div class='priceUnit'>元</div>
                <div class='salesVolume'>销售量:1000件</div>
              </div>
              <i class="iconfont icon-31gouwuchexuanzhong"></i>
            </div>
          </div>
        </div>
      </div>
      <div draggable="true" data-type="commodityList2" id="commodityList2_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="listName">列表标题列表标题</div>
        <div class="item">
          <img src="img/logo.png">
          <div class='info'>
            <div class="name">名字名字名字名字</div>
            <div class="infoCon">
              <div>
                <div class='price'>
                  99999999
                  <span class='priceUnit'>元</span>
                </div>
                <div class='salesVolume'>销售量:1000件</div>
              </div>
              <i class="iconfont icon-31gouwuchexuanzhong"></i>
            </div>
          </div>
        </div>
      </div>
      <div draggable="true" data-type="commodityList3" id="commodityList3_dom" class="copyDropDom">
        <div class="delDomClick">
          <i data-type="setting" class="iconfont icon-shuru"></i>
          <i data-type="top" class="iconfont icon-sanjiao2"></i>
          <i data-type="down" class="iconfont icon-sanjiao1"></i>
          <i data-type="del" class="iconfont icon-31shanchu"></i>
        </div>
        <div class="listName">列表标题列表标题</div>
        <div class="item">
          <img src="img/logo.png">
          <div class='info'>
            <div class="name">名字名字名字名字</div>
            <div class="infoCon">
              <div>
                <div class='price'>
                  99999999
                  <span class='priceUnit'>元</span>
                </div>
                <div class='salesVolume'>销售量:1000件</div>
              </div>
              <i class="iconfont icon-31gouwuchexuanzhong"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框区域 -->
    <div>
      <div class="bulletBoxBG">
        <i class="bulletBoxClose iconfont icon-guanbi closeBox"></i>
        <div class="colorSel">
          <h5 class="modal-title">颜色选择</h5>
          <div class="modal-body conList">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary closeBox" data-dismiss="modal">退出</button>
          </div>
        </div>

        <div class="iconSel">
          <h5 class="modal-title">图标选择</h5>
          <div class="modal-body conList">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary closeBox" data-dismiss="modal">退出</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- 页面逻辑 -->
<script src="js/workshop.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      // 页面列表
      pageList: [
        { 'icon': 'fenxiang2', 'name': '首页', 'id': 'index' },
        { 'icon': 'fenxiang2', 'name': '个人中心', 'id': 'user' },
        { 'icon': 'fenxiang2', 'name': '购物车', 'id': 'car' },
        { 'icon': 'fenxiang2', 'name': '商品详情', 'id': 'commodityDetails' },
        { 'icon': 'fenxiang2', 'name': '个人中心', 'id': '1' },
      ],
      // 公告组件
      basisComponent: [
        { 'icon': 'fenxiang2', 'name': '搜索1', 'id': 'search1' },
        { 'icon': 'fenxiang2', 'name': '搜索2', 'id': 'search2' },
        { 'icon': 'laba', 'name': '公告', 'id': 'placard1' }
      ],
      // 首页组件
      indexComponent: [
        { 'icon': 'home', 'name': '导航1', 'id': 'nav1' },
        { 'icon': 'home', 'name': '导航2', 'id': 'nav2' },
        { 'icon': 'home', 'name': '导航3', 'id': 'nav3' },
        { 'icon': 'home', 'name': '导航4', 'id': 'nav4' },
        { 'icon': '31quanbushangpin', 'name': '商品1', 'id': 'commodityList1' },
        { 'icon': '31quanbushangpin', 'name': '商品2', 'id': 'commodityList2' },
        { 'icon': '31quanbushangpin', 'name': '商品3', 'id': 'commodityList3' }
      ],
      // 商品详情页组件
      commodityDetailsComponent: [
        { 'icon': 'home', 'name': '轮播图', 'id': 'banner1' },
        { 'icon': 'home', 'name': '商品介绍', 'id': 'commodityInfo1' },
        { 'icon': 'home', 'name': '商品详情', 'id': 'commodityDetails1' }
      ],
      pageComponent: [],
      pageListDom: '',
      selcommodityPage: 'page'
    },
    // 初始化
    created: function () {
      // `this` 指向 vm 实例
      console.clear()
      console.log('初始化====>>>>a is: ' + this.selcommodityPage)
    },

    methods: {
      selPage(e) {
        let pageType = e.srcElement.dataset.type
        let component = []
        switch (pageType) {
          case 'index':
            component = this.indexComponent
            break;
          case 'user':
            component = this.indexComponent
            break;
          case 'commodityDetails':
            component = this.commodityDetailsComponent
            break;
          case 'car':
            component = this.indexComponent
            break;
          default:
            console.log('无匹配项')
            break;
        }
        this.selcommodityPage = 'commodity'
        // 公告组件与私有组件合并显示
        this.pageComponent = this.basisComponent.concat(component);
        console.log(this.pageComponent)
      },
      // 选择显示页面列表，或者标签列表
      commodityPageSel(e) {
        this.selcommodityPage = e.srcElement.dataset.type
      },
      copyDrop(e) {
        // e.dataTransfer.setData("id", e.target.id);
        console.log("SET -> addBuffer", e.target.id);
        e.dataTransfer.setData("addBuffer", e.target.id);
        e.dataTransfer.effectAllowed = 'all';
        e.dataTransfer.dropEffect = 'all';
        e.dataTransfer.setDragImage(this, 0, 0);
      },
      copyDrop2(e) {
        e.dataTransfer.setData("id", e.path[1].id);
      },
      allowDrop(e) {
        e.preventDefault();
      },
      getDrop(e) {
        e.preventDefault();
        var id = e.dataTransfer.getData("id");
        if (id === null || id === "") {
          console.log("id is NULL！");
          return;
        }
        var itemName = id + parseInt(Math.random() * (1000000 - 1 + 1) + 1);
        // 克隆真实对象
        var cloneObject = document.getElementById(id + "_dom").cloneNode(true);
        // 为克隆对象设置唯一Id
        cloneObject.setAttribute("id", itemName);
        // 事件追加绑定
        cloneObject.addEventListener("dragstart", this.copyDrop2);
        // 把新的节点添加到新的区域中
        e.target.appendChild(cloneObject);
        // 修改名称
        this.dialogFormVisible = true;
        this.labelid = itemName;
        // 获取手机模型中的子元素
        findChildren();
      },
    }
  })

</script>

</html>